$(function () {
  // 发送方式
  function send(url) {
    let arr = [];
    $.ajax({
      type: "get",
      url,
      dataType: "json",
      async: false,
      success: function (data) {
        arr = data;
      },
    });
    return arr;
  }
  // 图片数据
  function data(Arr) {
    let str = "";
    for (let i in Arr) {
      str += "<li><img src='" + Arr[i].url + "' alt='" + Arr[i].des + "'></li>";
    }
    $(".list").html(str);
  }
  let arr = [];
  arr = send("./index.json");
  data(arr);
  let sign = 0; //标识
  let rounds = $(".round li"); //小圆点
  let lis = $(".list li"); //图片
  let num = lis.length; //li长度
  $(document).on("click", ".right", function () {
    if (lis.is(":animated")) {
      return;
    }
    // 先淡出
    lis.eq(sign).fadeOut(100);
    sign++;
    // 临界判断
    if (sign > num - 1) {
      sign = 0;
    }
    // console.log(sign, "right");
    // 后淡入
    lis.eq(sign).fadeIn(100);
    // 小圆点切换
    rounds.eq(sign).addClass("choose").siblings(rounds).removeClass("choose");
  });
  $(document).on("click", ".left", function () {
    // is(":animated") 表示当元素运动的时候返回true，当元素不运动的时候返回false
    if (!lis.is(":animated")) {
      lis.eq(sign).fadeOut(100);
      sign--;
      if (sign < 0) {
        sign = num - 1;
      }
    //   console.log(sign, "left");
      lis.eq(sign).fadeIn(100);
    } else{
        return;
    }
    rounds.eq(sign).addClass("choose").siblings(rounds).removeClass("choose");
  });
  rounds.mouseover(function () {
    let index = $(this).index();
    sign = index;
    $(this).addClass("choose").siblings(rounds).removeClass("choose");
    lis.eq(sign).stop(true).fadeIn(100).siblings(lis).stop(true).fadeOut(100);
  });
  function Play() {
    // 先淡出
    lis.eq(sign).fadeOut(100);
    sign++;
    // 临界判断
    if (sign > num - 1) {
      sign = 0;
    }
    // console.log(sign, "right");
    // 后淡入
    lis.eq(sign).fadeIn(100);
    // 小圆点切换
    rounds.eq(sign).addClass("choose").siblings(rounds).removeClass("choose");
  }
  // 自动轮播
  let timer = setInterval(Play, 2000);
  //鼠标移入停止轮播
  $(".main").mouseover(function () {
      $('.left').css("display","block");
      $('.right').css("display","block");
    clearInterval(timer);
  });
  // 鼠标离开继续轮播
  $(".main").mouseleave(function () {
    $('.left').css("display","none");
    $('.right').css("display","none");
    // 先关再开
    clearInterval(timer);
    timer = setInterval(Play, 2000);
  });
});
